<template>
  <ul class="file">
    <li class="file-li" v-for="(item, index) in imgList" :key="index">
      <img
        class="file-li-main"
        :src="item.target.result"
        crossorigin="anonymous"
        alt=""
      />
      <img
        class="file-li-delete"
        src="../assets/delete.png"
        alt=""
        @click="deleteImg(index)"
        title="删除图片"
      />
    </li>
    <li class="file-li" title="上传(PNG)图片">
      <img class="file-li-pic" src="../assets/pic.png" alt="" />
      <p class="file-li-text">上传(PNG)图片</p>
      <input
        class="file-li-file"
        type="file"
        accept="image/*"
        multiple
        @change="uploadImg"
      />
    </li>
    <li class="file-li" title="上传背景音乐">
      <img class="file-li-pic" src="../assets/voice.png" alt="" />
      <p class="file-li-text">
        {{ videoObj["name"] ? videoObj.name : "上传背景音乐" }}
      </p>
      <input
        class="file-li-file"
        type="file"
        accept="audio/*"
        @change="uploadVideo"
      />
    </li>
  </ul>
  <button @click="handleOnlineImg">在线链接</button>
</template>

<script setup>
import { ref } from "vue";
const imgList = ref([]);
const videoObj = ref({});
import { Jpg2Png } from "@/utils/jpg2png";
// import { ImgArr } from "./img";
const ImgArr = [
  "http://i.vimeocdn.com/video/1738830335-5ab855ae1498d480252738aef7b3c4d0dd061ea2771950a6cd5bf04738699bdc-d_640x360.jpg",
  "https://cdn.pixabay.com/photo/2023/10/27/12/13/vineyard-8345243_1280.jpg",
  "https://cdn.pixabay.com/photo/2023/04/24/16/42/doll-7948537_640.jpg",
  "https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_640.jpg",
  // "http://ecowitt.oss-cn-shanghai.aliyuncs.com/images/webcam/v0/2023_10_20/105748/2ea1fa0b6982d7ea11197a7093f58983.jpg",

  "https://cdn.pixabay.com/photo/2023/10/28/18/02/songbird-8348139_640.png",
  // "https://cdn.pixabay.com/photo/2023/10/28/18/02/songbird-8348139_640.png",
  // "https://cdn.pixabay.com/photo/2023/10/28/18/02/songbird-8348139_640.png",
  "http://localhost:3000/src/assets/pic.png",
];

const emit = defineEmits(["change"]);

const uploadImg = (e) => {
  let files = e.target.files;

  fileReader(files, 0);
};

// 递归获取图片显示, 主要获取 raw文件
const fileReader = (files, index) => {
  let reader = new FileReader();
  reader.readAsDataURL(files[index]);

  reader.onload = (e) => {
    imgList.value.push(Object.assign(e, { raw: files[index] }));
    if (++index < files.length) {
      fileReader(files, index);
    }
    emit("change", { imgs: imgList.value, videoBg: videoObj.value });
  };
};

const uploadVideo = (e) => {
  videoObj.value = e.target.files[0];
  emit("change", { imgs: imgList.value, videoBg: videoObj.value });
};

const deleteImg = (index) => {
  imgList.value.splice(index, 1);
  emit("change", { imgs: imgList.value, videoBg: videoObj.value });
};
//  {
//     mode: "cors", // 添加跨域属性
//     credentials: "same-origin", // 添加 cookies
//     headers: {
//       "Content-Type": "image/png", // 设置请求头 MIME 类型
//       crossOrigin: "anonymous", // 添加 crossorigin 属性
//     },
//   }
const readImgUrl = async (file) => {
  const blob = await fetch(file).then((response) => response.blob());
  //   const imgUrl = URL.createObjectURL(blob);

  // Jpg2Png(blob, (res) => {
  //   const url = blobToFile(res, file);
  //   Promise.resolve(url);
  // });
  const imgUrl = blobToFile(blob, file);
  return imgUrl;

  return new Promise((resolve, reject) => {
    Jpg2Png(blob, (res) => {
      const url = blobToFile(res, file);
      console.log(res, url, "转化成功");

      resolve(url);
    });
  });
};
function blobToFile(blob, fileName) {
  const file = new File([blob], fileName);
  return file;
}

const handleOnlineImg = async () => {
  const promiseList = ImgArr.map(readImgUrl);
  const data = await Promise.allSettled(promiseList);

  data.forEach((item) => {
    const res = item.value;
    if (item.status === "fulfilled") {
      imgList.value.push({ target: { result: res.name }, raw: res });
    }
  });
  emit("change", { imgs: imgList.value, videoBg: videoObj.value });
};
</script>

<style lang="less">
.file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &-li {
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid #f50057;
    margin: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;

    &-main {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &-pic {
      width: 35px;
    }

    &-delete {
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      z-index: 1;
      cursor: pointer;
    }

    &-text {
      margin-top: 15px;
      color: #f50057;
      font-size: 14px;
      width: 110px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-file {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      font-size: 0;
      cursor: pointer;
    }
  }
}
</style>